<template>
    <div class="hot">
        <h4>人气推荐</h4>
        <ul v-for="item in hotGoodsList" :key="item.id">
           
                <img :src="item.list_pic_url" alt="">
                <p class="box1">{{ item.name }}</p>
                <p class="box2">{{item.goods_brief}}</p>
                <p class="price">{{ item.retail_price | formatMoney }}</p>
          
        </ul>
    </div>
</template>
<script>
export default {
    name: '',
    props: ['hotGoodsList'],
    data() {
        return {}
    },
    components: {
    },
    watch: {},
    methods: {
    },
    beforeCreate() { },
    created() { 
       
    },
    beforeMount() { },
    mounted() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style scoped lang="less">
.hot {
    margin-top: 50px;
}
ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
      position: relative;
      background-color: rgba(246 241 241 / 73%);
      margin-bottom: 10px;
    img{
         width: 25%;
        display: block;
    }
}

h4 {
    display: block;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 10px;
}
.box1{
        font-size: 20px;
        position: absolute;
        top: 11px;
        left: 130px;
        
    }
    .price{
        position: absolute;
        font-size: 15px;
        color: crimson;
        top: 70px; 
        left: 157px;
    }
    .box2{
         position: absolute;
        top: 45px;
        left: 145px;
        font-size: 14px;
    }
</style>